<template>
<form class="form-horizontal" v-on="submit: onSubmit, close: onClose">
  <div class="form-group" v-class="has-error: !validIpaddr">
    <label class="col-sm-2 control-label">IP地址</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" v-model="devCfg.ipaddr">
    </div>
  </div>
  <div class="form-group" v-class="has-error: !validNetmask">
    <label class="col-sm-2 control-label">子网掩码</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" v-model="devCfg.mask">
    </div>
  </div>
  <div class="form-group" v-class="has-error: !validGateway">
    <label class="col-sm-2 control-label">默认网关</label>
    <div class="col-sm-10">
      <input type="text" class="form-control" v-model="devCfg.gateway">
    </div>
  </div>  
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="pull-right">
        <button type="close" class="btn btn-default">关闭</button>
        <button type="submit" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div> 
</form>
</template>

<script>
var isValidIp = require('../lib/utils').isValidIp;
var log = require('../lib/log');

module.exports = {
  replace: true,
  props: ['devCfg', 'doSave', 'doClose'],
  computed: {
    validIpaddr: function() {
      return isValidIp(this.devCfg.ipaddr);
    },
    validNetmask: function() {
      return isValidIp(this.devCfg.mask);
    },
    validGateway: function() {
      return isValidIp(this.devCfg.gateway);
    }
  },
  methods: {
    onSubmit: function(e) {
      e && e.preventDefault();
      if (this.validIpaddr && this.validNetmask && this.validGateway) {
        this.doSave();
      } else {
        log.ERROR_TRACE('Invalid Params');
      }
    },
    onClose: function(e) {
      e && e.preventDefault();
      this.doClose();
    }    
  }
}
</script>

<style>
</style>